import React,{useState,useMemo} from 'react'
/**
 * useMemo的作用相当于vue中的计算属性
 * 参数说明
 * 参数1：回调函数
 * 参数2：数组，在数组的元素是要依赖的数据
 */
export default function UseMemoDemo() {
    const [list,setList]=useState([
        {
            id:'1001',
            name:'《ES标准入门》',
            price:89,
            num:1
        },
        {
            id:'1002',
            name:'《javascript经典》',
            price:129,
            num:2
        }
    ])
    const changeNum=(index,flag)=>{
        switch(flag){
            case '+':
                list[index].num++
                setList([...list])
                break
            case '-':
                list[index].num--
                setList([...list])
                break
        }
    }
    
    const total=useMemo(()=>{
        return list.reduce((prev,cur)=>prev+cur.price*cur.num,0)
    },[list])
   return (
    <div>
        <table>
            <thead>
                <tr>
                    <td>编号</td>
                    <td>名称</td>
                    <td>价格</td>
                    <td>数量</td>
                    <td>总价</td>
                </tr>
            </thead>
            <tbody>
                {
                    list.map((item,index)=><tr key={item.id}>
                        <td>{item.id}</td>
                        <td>{item.name}</td>
                        <td>{item.price}</td>
                        <td>
                            <button onClick={()=>changeNum(index,'-')}>+</button>
                            {item.num}
                            <button onClick={()=>changeNum(index,'+')}>+</button>
                        </td>
                        <td>{item.price*item.num}</td>
                    </tr>)
                }
            </tbody>
            <tfoot>
                <tr>
                    <td colSpan={5}>
                        总价:{total}
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
  )
}
